<template>
  <div class="login-container">
    <img src="../assets/images/login_bg.png" class="login-bg" />
    <el-card header="" class="login-card">
      <div class="logo-img">
        <img width="100" src="../assets/images/logo_wang.png" />
        <h2 class="title">VUE-Node-Admin</h2>
      </div>

      <el-form @submit.enter.prevent="login">
        <el-form-item>
          <el-input
            prefix-icon="el-icon-user"
            placeholder="请输入用户名"
            v-model="model.username"
          >
          </el-input>
        </el-form-item>

        <el-form-item>
          <el-input
            prefix-icon="el-icon-unlock"
            placeholder="请输入密码"
            type="password"
            v-model="model.password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      model: {},
    };
  },
  methods: {
    async login() {
      const res = await this.$http.post("login", this.model);
      // sessionStorage.token = res.data.token;
      localStorage.token = res.data.token; //token保存倒浏览器
      this.$router.push("/"); // 登录成功跳转首页
      this.$message({
        type: "success",
        message: "登录成功",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.login-bg {
  background-color: #409eff;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin-top: 200px;
}
.login-card {
  position: absolute;
  left: 50%;
  top: 17%;
  z-index: 99;
  transform: translate3d(-50%, 0, 0);
  width: 318px;
  padding: 20px;
  padding-bottom: 20px;
  border: 1px solid #ebeef5;
  border-top: 10px solid #409eff;
  background-color: #ffffff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  // margin: 10rem auto;
  // background-color: #409eff;
  .logo-img {
    width: 100%;
    text-align: center;
    h2 {
      color: #409eff;
    }
  }
}
</style>